<div class="country-header">
  <div class="show_graph_source">Source: Hansen/UMD/Google/USGS/NASA</div>
  <div class="overview_button_group">
    <div class="inner">
      <div class="share mobile-hide share-link item" data-share-embed-url="<%= request.protocol + request.host_with_port %>/embed/country/<%= @country['iso'] %>" data-share-embed-width="600" data-share-embed-height="420">
        <svg>
          <use xlink:href="#shape-share"></use>
        </svg>Share
      </div>
      <div class="download-spatial">
        <a href="#" data-source="umd_tree_loss_gain_infographics" class="info source">
          Info
          <span class="sidenav-icon circle">
            <svg>
              <use xlink:href="#shape-info"></use>
            </svg>
          </span>
        </a>
      </div>
    </div>
  </div>
  <div class="inner">
    <!--  colored header -->
    <div class="country-header-inner">
      <div class="country-title">
        <h1 title="<%= @country['name'] %>"><%= @country['name'] %></h1>
        <div class="country-selector">
          <select class="white" id="areaSelector">
            <option class="dark" value="default">Select jurisdiction</option>
          </select>
          <div class="selector-remove">✕</div>
          <div class="selector-arrow"></div>
        </div>
      </div>

      <div class="country-details">
        <div class="country-preview">
          <div class="mobile-scroll"></div>
          <div class="map" id="countryMap"></div>
          <div class="tree-numbers">
            <div class="tree-cover">
              <h4>Tree cover (2000)</h4>
                <span class="amount"><!--<%= extent_to_human(@country['extent'], format: '%n') %>--></span>
                <span class="unit"><%= extent_to_human(@country['extent'], format: '%u', shortUnit: true) %></span>
            </div>
            <div class="total-area">
              <h4>Percent Tree Cover (2000)</h4>
              <span class="amount"></span>
              <span class="unit">%</span>
            </div>
            <h4 class="t">TREE COVER LOSS (2001 - 2014)</h4>
            <div class='total-loss'></div>
            <div class='total-loss-ha'></div>
          </div>
          <div class="loss-gain-graph ghost">
            <h4 class="mobile-hide">TREE COVER LOSS (2001 - 2014)</h4>
            <div class='total-loss'></div>
            <div class='total-loss-ha'></div>
            <div class='graph' id="lossGainGraph"></div>
            <div class='graph-amount'></div>
            <div class='graph-date'></div>
            <hr>
            <h4>TREE COVER GAIN (2001 - 2012)</h4>
            <div class='graph-amount graph-gain-amount'></div>
            <div class='graph-gain-total'></div>
            <div class='coming-soon'><span>Not yet available for this country</span></div>
          </div>
          <div class="canopy-status">
            <span>Displaying tree cover and loss with ><em id="canopy-status-number">30%</em> canopy density</span>
          </div>
          <div class="note-status">
            <span><em>NOTE:</em> tree cover loss and gain statistics cannot be compared against each other. <a href="#" class="source" data-source="umd_tree_loss_gain_infographics">Learn more</a></span>
          </div>
        </div>
        <div class="country-sidenav">
          <button id="country-sidebar-button"><em>More Options</em> <span class="icon"><svg><use xlink:href="#shape-arrow-down"></use></svg></span></button>
          <ul id="country-sidebar-ul">
            <li>
              <a href='<%= map_coords %>/grayscale/loss,forestgain?begin=2001-01-01&end=2014-12-30&threshold=' class='action analyze_from_country' target="_blank" id="url_analysis">
                <strong>Analyze forest change</strong>
                <span class="sidenav-icon">
                  <svg>
                    <use xlink:href="#shape-graph"></use>
                  </svg>
                </span>
              </a>
            </li>
            <li>
              <a href='<%= map_coords %>/grayscale/loss,forestgain?dont_analyze=true' class='action layers_from_country' target="_blank">
                <strong>View country data layers</strong>
                <span class="sidenav-icon">
                  <svg>
                    <use xlink:href="#shape-tab-countries"></use>
                  </svg>
                </span>
              </a>
            </li>
            <li>
              <a href='http://data.globalforestwatch.org/datasets?keyword=<%= @country['iso'] %>' class="download-mobile-link" target='_blank'>
                Browse and download country data
                <span class="sidenav-icon">
                  <svg>
                    <use xlink:href="#shape-download-18"></use>
                  </svg>
                </span>
              </a>
            </li>
            <li>
              <a href="http://gfw2-data.s3.amazonaws.com/country/umd_country_stats/tree_cover_stats_2014.xlsx" class="download download-mobile-link" data-type="country-stats">
              <!-- <a href="#" class="download disabled download-mobile-link"> -->
                Download tree cover stats
                <span class="sidenav-icon">
                  <svg>
                    <use xlink:href="#shape-download-18"></use>
                  </svg>
                </span>
              </a>
            </li>
            <!--  indepth message -->
            <% if @country['indepth'].present? %>
                <li>
                  <% if @country['iso'] == 'IDN' %>
                    <a href="<%= @country['indepth'] %>" target="_blank" class="download country-indepth-link">WRI in <%= @country['name'] %>
                  <% else %>
                    <a href="<%= @country['indepth'] %>" target="_blank" class="download country-indepth-link">Visit the forest atlas
                  <% end %>
                    <span class="sidenav-icon">
                      <svg>
                        <use xlink:href="#shape-<%= @country['iso']%>"></use>
                      </svg>
                    </span>
                  </a>
                </li>
            <% end %>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>
